<template>
    <div class="recharge-wrapper">
        <div v-if="loading">
            <Spin fix size="large"></Spin>
        </div>
        <h2 class="public-title">充值</h2>
        <div class="pay-tab clearfix">
            <a href="javascript:void(0);" :class="{'active' : onlinePay}" @click="chooseOnline"><span class="icon icon-xs"></span>线上支付</a>
            <a href="javascript:void(0);" :class="{'active' : !onlinePay}" @click="chooseOffline"><span class="icon icon-zx"></span>线下支付</a>
        </div>

        <div class="pay-info" v-if="onlinePayInfo && this.onlineList.length">
            <Row type="flex" justify="space-between" class="item-list">
                <Col span="4" class="col-l">会员账号：</Col>
                <Col span="20">{{userInfo.username}}</Col>
            </Row>
            <Row type="flex" justify="space-between" class="item-list">
                <Col span="4" class="col-l">充值方式：</Col>
                <Col span="20">
                    <div class="recharge-list">
                        <ul>
                            <li :class="{'checked' : itemIndex == index}" v-for="(item, index) in onlineList" :key="index" @click="linkFun(item, index, 0)">
                                <template v-if="onlineHandsel > 0">
                                    <Tooltip placement="top">
                                        <img :src="imgRequest + item.logo">
                                        <span>{{item.payment_name}}</span>
                                        <div slot="content">返现比例：{{onlineHandsel}}%</div>
                                    </Tooltip>
                                </template>
                                <template v-else>
                                    <img :src="imgRequest + item.logo">
                                    <span>{{item.payment_name}}</span>
                                </template>
                            </li>

                            <!-- <li :class="{'checked' : itemIndex == index}" v-for="(item, index) in onlineList" :key="index" @click="linkFun(item, index, 0)">
                                <img :src="imgRequest + item.logo">
                                <span>{{item.payment_name}}</span>
                            </li> -->
                        </ul>
                    </div>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="item-list" v-show="rechargeData.type_mode == 2">
                <Col span="4" class="col-l">充值银行：</Col>
                <Col span="20">
                    <Select v-model="selectedbankcode" style="width:440px">
                        <Option v-for="item in bankList" :value="item.bank_code" :key="item.bank_code">{{item.name}}</Option>
                    </Select>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="item-list">
                <Col span="4" class="col-l">充值金额：</Col>
                <Col span="20">
                    <div class="quick-money">
                        <span class="goods-items" :class="{'checked' : amountIndex == index}" v-for="(item, index) in quickBtn" :key="index" @click="amountIndex = index">{{item}}元</span><span class="goods-items other-amount" :class="{'checked' : amountIndex == -1}" @click="amountIndex = -1"><input placeholder="其他" v-model="amountNum" ref="amountNum"></input>元</span>
                    </div>
                    <p class="recharge-tips text-gray" v-show="rechargeData.lower_limit"><em class="text-red">*</em>充值限额：下限{{rechargeData.lower_limit}}人民币</p>
                    <Button class="next-step" :loading="btnLoading" @click="payNow">
                        <span v-if="!btnLoading">下一步</span>
                        <span v-else>提交中...</span>
                    </Button>
                </Col>
            </Row>
            <div class="tips" v-if="rechargeData.prompt != ''">
                <h4>温馨提示</h4>
                <!-- <p v-html="rechargeData.prompt"></p> -->
                <p v-html="rechargeData.prompt[0].replace(/\r?\n|\r|&crarr;|&#8629;/g, '<br>')"></p>
            </div>
        </div>

        <div class="pay-info" v-if="offlinePayInfo && this.offlineList.length">
            <Row type="flex" justify="space-between" class="item-list">
                <Col span="4" class="col-l">会员账号：</Col>
                <Col span="20">{{userInfo.username}}</Col>
            </Row>
            <Row type="flex" justify="space-between" class="item-list">
                <Col span="4" class="col-l">充值方式：</Col>
                <Col span="20">
                    <div class="recharge-list">
                        <ul>
                            <li :class="{'checked' : itemIndex == index}" v-for="(item,index) in offlineList" :key="index" @click="linkFun(item, index, 1)">
                                <template v-if="item.handsel > 0">
                                    <Tooltip placement="top">
                                        <img :src="imgRequest + item.logo">
                                        <span>{{item.payment_name}}</span>
                                        <div slot="content">返现比例：{{item.handsel}}%</div>
                                    </Tooltip>
                                </template>
                                <template v-else>
                                    <img :src="imgRequest + item.logo">
                                    <span>{{item.payment_name}}</span>
                                </template>
                            </li>
                            <!-- <li :class="{'checked' : itemIndex == index}" v-for="(item,index) in offlineList" :key="index" @click="linkFun(item, index, 1)">
                                <img :src="imgRequest + item.logo">
                                <span>{{item.payment_name}}</span>
                            </li> -->
                        </ul>
                    </div>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="item-list">
                <Col span="4" class="col-l">充值金额：</Col>
                <Col span="20">
                    <div class="quick-money">
                        <span class="goods-items" :class="{'checked' : amountIndex == index}" v-for="(item, index) in quickBtn" :key="index" @click="amountIndex = index">{{item}}元</span><span class="goods-items other-amount" :class="{'checked' : amountIndex == -1}" @click="amountIndex = -1"><input placeholder="其他" v-model="amountNum" ref="amountNum"></input>元</span>
                    </div>
                    <p class="recharge-tips text-gray" v-show="rechargeData.min_recharge && rechargeData.max_recharge">
                        <em class="text-red">*</em>充值限额：
                        <span v-if="rechargeData.max_recharge == -1">该方式额度已达充值限额</span>
                        <span v-else>{{rechargeData.min_recharge}} ~ {{rechargeData.max_recharge}}，建议通过银行卡转账入款</span>
                    </p>
                    <Button class="next-step" :loading="btnLoading" :disabled="rechargeData.max_recharge == -1" @click="payNow">
                        <span v-if="!btnLoading">下一步</span>
                        <span v-else>提交中...</span>
                    </Button>
                </Col>
            </Row>
            <div class="tips" v-show="rechargeData.prompt != ''">
                <h4>温馨提示</h4>
                <p v-html="rechargeData.prompt.replace(/\\n/g,'</br>')"></p>
            </div>
        </div>

        <div class="pay-info pay-info-online" v-if="onlinePayTwo">
            <div class="row-wrap">
                <Row type="flex" justify="center" align="middle">
                    <Col span="12">
                        <Row type="flex" justify="space-between" class="row-list">
                            <Col span="8" class="col-l">发卡银行：</Col>
                            <Col span="16">{{rechargeData.payment_name}}</Col>
                            <!-- <Col span="16">{{issuingBank}}</Col> -->
                        </Row>
                        <Row type="flex" justify="space-between" class="row-list">
                            <Col span="8" class="col-l">订单号：</Col>
                            <Col span="16">{{order_no}}</Col>
                        </Row>
                        <Row type="flex" justify="space-between" class="row-list">
                            <Col span="8" class="col-l">充值金额：</Col>
                            <Col span="16">{{amountVal}} 人民币</Col>
                        </Row>
                    </Col>
                    <Col span="12" class="col-r">
                        <img v-if="codeImg && codeImg != ''" :src="codeImg" alt="">
                        <span v-else id="qrcode" ref="qrcode"></span>
                        <p>扫一扫二维码支付</p>
                    </Col>
                </Row>
            </div>
            <div class="btn-wrap">
                <Button class="next-step" :loading="btnLoading" @click="submitOnLine">
                    <span v-if="!btnLoading">我已完成支付</span>
                    <span v-else>提交中...</span>
                </Button>
            </div>
        </div>

        <div class="pay-info pay-info-offline" v-if="offlinePayTwo">
            <div class="row-wrap">
                <Row type="flex" justify="center" align="middle">
                    <Col span="12">
                        <Row type="flex" justify="space-between" class="row-list">
                            <Col span="12" class="col-l">发卡银行：</Col>
                            <Col span="12">{{rechargeData.name}}<span class="icoCopy" :data-clipboard-text="rechargeData.name" @click="copyText"><Icon type="document"></Icon></span></Col>
                        </Row>
                        <Row type="flex" justify="space-between" class="row-list">
                            <Col span="12" class="col-l">收款人：</Col>
                            <Col span="12">{{rechargeData.account_name}}<span class="icoCopy" :data-clipboard-text="rechargeData.account_name" @click="copyText"><Icon type="document"></Icon></span></Col>
                        </Row>
                        <Row type="flex" justify="space-between" class="row-list">
                            <Col span="12" class="col-l">收款账号：</Col>
                            <Col span="12">{{rechargeData.account}}<span class="icoCopy" :data-clipboard-text="rechargeData.account" @click="copyText"><Icon type="document"></Icon></span></Col>
                        </Row>
                        <Row type="flex" justify="space-between" class="row-list">
                            <Col span="12" class="col-l">附加码：</Col>
                            <Col span="12">{{code}}<span class="icoCopy" :data-clipboard-text="code" @click="copyText"><Icon type="document"></Icon></span></Col>
                        </Row>
                        <Row type="flex" justify="space-between" class="row-list">
                            <Col span="12" class="col-l">充值金额：</Col>
                            <Col span="12">{{amountVal}} 人民币</Col>
                        </Row>
                    </Col>
                    <Col span="12" class="col-r">
                        <template v-if="rechargeData.code">
                            <img :src="imgRequest + '/' + rechargeData.code" alt="">
                            <p>{{rechargeData.name}}扫码支付</p>
                        </template>
                        <template v-else>
                            <img :class="{'border-none' : !rechargeData.code}" :src="imgRequest + rechargeData.logo" alt="">
                            <p>{{rechargeData.name}}支付</p>
                        </template>
                    </Col>
                </Row>
            </div>
            <div class="btn-wrap">
                <Button class="next-step" :loading="btnLoading" @click="submitOffLine">
                    <span v-if="!btnLoading">点击确认提交</span>
                    <span v-else>提交中...</span>
                </Button>
            </div>
        </div>

        <div class="pay-info pay-status" v-if="successFlag">
            <div class="row-wrap">
                <img src="@/assets/images/common_success_pic@2x.png" alt="">
                <p>支付信息提交成功</p>
                <div class="mtb-min">
                    <Row type="flex" justify="space-between" class="row-list">
                        <Col span="12" class="col-l">充值方式：</Col>
                        <Col span="12" class="col-r">{{this.onlinePay ? '线上' : '线下'}}{{rechargeData.name}}转账</Col>
                    </Row>
                    <Row type="flex" justify="space-between" class="row-list">
                        <Col span="12" class="col-l">充值金额：</Col>
                        <Col span="12" class="col-r">{{amountVal}} 人民币</Col>
                    </Row>
                    <Row type="flex" justify="space-between" class="row-list" v-show="!this.onlinePay">
                        <Col span="12" class="col-l">附加码：</Col>
                        <Col span="12" class="col-r">{{code}}</Col>
                    </Row>
                </div>
            </div>
            <div class="btn-wrap"><a href="javascript:void(0);" class="next-step" @click="successBtn">返回</a></div>
        </div>
        <div class="pay-info pay-status" v-if="errorFlag">
            <div class="row-wrap">
                <img src="@/assets/images/common_fault_pic@2x.png" alt="">
                <p>充值异常</p>
                <div class="mtb-min">
                    <Row type="flex" justify="space-between" class="row-list">
                        <Col span="12" class="col-l">充值方式：</Col>
                        <Col span="12" class="col-r">{{rechargeData.payment_name}}</Col>
                    </Row>
                    <Row type="flex" justify="space-between" class="row-list">
                        <Col span="12" class="col-l">充值金额：</Col>
                        <Col span="12" class="col-r">{{amountVal}} 人民币</Col>
                    </Row>
                </div>
            </div>
            <div class="btn-wrap"><a href="javascript:void(0);" class="next-step" @click="errorBtn">重新充值</a></div>
        </div>

        <Modal
            v-model="modalPayAfter"
            width="400"
            title="温馨提示"
            okText='支付成功'
            cancelText='未支付'
            @on-ok="ModalOk"
            @on-cancel="ModalCancel"
        >
            <div style="font-size:14px;">请根据支付情况点击下方按钮请不要重复支付。</div>
        </Modal>

    </div>
</template>
<script>
import { jsonToString } from "@/common/js/jsonToString";
import QRCode from 'qrcodejs2'
import Clipboard from 'clipboard'
import { mapGetters, mapActions } from "vuex"
export default {
    data () {
        return {
            onlinePay: true, //默认线上支付
            onlineList: '',
            offlineList: '',
            quickBtn: {}, //推荐充值金额

            onlinePayInfo: true, //线上充值信息            
            onlinePayTwo: false,

            offlinePayInfo: false, //充值信息
            offlinePayTwo: false,

            successFlag: false, //充值成功
            errorFlag: false, //充值异常
            rechargeData: {},  //充值数据
            itemIndex: 0,
            amountIndex: 0,
            amountNum: '',
            amountVal: null,
            code: '',
            order: '',
            codeUrl: '',
            codeImg: '',
            paymentLink: '',
            collectBank: 0,

            bankList: [], //充值银行列表
            selectedbankcode: "", //充值银行的bank_code

            loading: false,
            btnLoading: false,
            // issuingBank: '',

            modalPayAfter: false,

            onlineHandsel: '', //线上支付返现比列
        }
    },
    created() {
        
    },
    mounted() {
        this.amountNum = '';
        this._getRechargeList();
    },
    computed: {
        ...mapGetters(['userInfo','accountData'])
    },
    methods: {
        linkFun(item, index, line) {
            this.rechargeData = item;
            this.amountIndex = 0;
            this.itemIndex = index;
            this.amountNum = '';
            if (this.rechargeData.type_mode == 2) {
                this._getBankList(); //获取充值银行列表
            }
            // console.log('item', item);
        },
        _getRechargeList() {
            if (!JSON.parse(localStorage.getItem("isUser"))) {
                this.onlineList = [];
                this.offlineList = [];
                this.$Message.info('游客暂无权限，请先注册会员')
				return
            }
            var params = {
                token: localStorage.getItem("token")
            };
            this.loading = true;
            this.$http.post(this.urlRequest + "?m=api&c=recharge&a=offlineIndex", params).then(res => {
                this.loading = false;
                if (res.data.status == 0) {
                    console.log(res.data)
                    this.onlineList = res.data.list2;
                    this.offlineList = res.data.list;
                    this.onlineHandsel = res.data.online_handsel;
                    this.quickBtn = res.data.quick_btn;
                    if (this.onlinePay) {
                        this.rechargeData = this.onlineList[0];
                    } else {
                        this.rechargeData = this.offlineList[0];
                    }
                }
            }).catch(error => {
                this.loading = false;
				this.$Message.warning('数据请求超时');
			});
        },
        _getBankList() { //获取充值银行列表
            var params = {
                token: localStorage.getItem("token"),
                payment_id: this.rechargeData.payment_id
            };
            // this.$vux.loading.show();
            this.$http.post(this.urlRequest + "?m=api&c=recharge&a=getRechargeBankList", params).then(res => {
                // this.$vux.loading.hide();
                if (res.data.status == 0) { //银行列表
                    this.bankList = res.data.bankList;
                    this.selectedbankcode = this.bankList[0].bank_code; //获取银行简码
                    console.log(this.bankList);
                } else {
                    if (res.data.ret_msg !== '') {
                        this.$Message.warning(res.data.ret_msg);
                    }
                }
            }).catch(error => {
                // this.$vux.loading.hide();
                this.$Message.warning('获取银行列表失败');
            });
        },
        
        chooseOnline() { //线上充值
            // clearInterval(this.timer);
            if (this.onlinePayTwo || this.offlinePayTwo) {
                this.$Modal.confirm({
                    title: '温馨提示',
                    content: "切换后将取消当前未完成订单，是否继续？",
                    okText: '确定',
                    cancelText: '取消',
                    onOk: () => {
                        this.onlineInfo()
                    }
                });
            } else {
                this.onlineInfo()
            }
        },
        onlineInfo() { //线上充值数据展示处理
            this.rechargeData = this.onlineList[0];
            this.onlinePay = true;
            this.onlinePayInfo = true;
            this.onlinePayTwo = false;
            this.itemIndex = 0; //默认选中第一个支付方式
            this.amountIndex = 0; //默认选中第一个金额
            this.amountNum = ''; //其他金额清空
            this.offlinePayInfo = false;
            this.offlinePayTwo = false;
            this.successFlag = false;
            this.errorFlag = false;
        },
        chooseOffline() { //线下充值
            // clearInterval(this.timer);
            if (this.onlinePayTwo || this.offlinePayTwo) {
                this.$Modal.confirm({
                title: '温馨提示',
                content: "切换后将取消当前未完成订单，是否继续？",
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                    this.offlineInfo()
                }
                });
            } else {
                this.offlineInfo()
            }
        },
        offlineInfo() { //线下充值数据展示处理
            this.rechargeData = this.offlineList[0];
            this.onlinePay = false;
            this.offlinePayInfo = true;
            this.offlinePayTwo = false;
            this.itemIndex = 0; //默认选中第一个支付方式
            this.amountIndex = 0; //默认选中第一个金额
            this.amountNum = ''; //其他金额清空
            this.onlinePayInfo = false;
            this.onlinePayTwo = false;
            this.successFlag = false;
            this.errorFlag = false;
        },
        payNow() {
            if (this.amountIndex == -1) {
                this.amountVal = this.amountNum
            } else {
                this.amountVal = this.quickBtn[this.amountIndex];
            }
            console.log('this.amountVal', this.amountVal)
            var newAmountVal = Number(this.amountVal);
            
            if (this.amountVal == '' || this.amountVal == 0) {
                this.$refs.amountNum.focus();
                this.$Message.warning('请输入充值金额');
                return
            }
            var formatAmount = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            if (!formatAmount.test(this.amountVal)) {
                this.$refs.amountNum.focus();
                this.$Message.warning('输入的资金格式有误')
				return
            }

            if (this.onlinePay) { //线上
                if (this.rechargeData.type_mode == 2) {
                    if (this.bankListValue == "") {
                        this.$Message.warning('请选择银行');
                        return
                    }
                }
                var newLowerLimit = Number(this.rechargeData.lower_limit);
                if (newAmountVal < newLowerLimit) {
                    this.$Message.warning('充值金额不能小于' + newLowerLimit + '元')
                    return
                }
                var params = {
                    token: localStorage.getItem("token"),
                    channel_type: this.rechargeData.channel_type,
                    type: this.rechargeData.type,
                    money : this.amountVal ? this.amountVal: "",
                    pay_type: this.rechargeData.payment_name,
                    bank_code: this.selectedbankcode
                };
                // if (params.channel_type == 'wx') {
                //     this.issuingBank = '微信扫码'
                // } else if (params.channel_type == 'wxwap') {
                //     this.issuingBank = '微信H5'
                // } else if (params.channel_type == 'ali') {
                //     this.issuingBank = '支付宝扫码'
                // } else if (params.channel_type == 'aliwap') {
                //     this.issuingBank = '支付宝H5'
                // } else if (params.channel_type == 'qq') {
                //     this.issuingBank = 'QQ钱包扫码'
                // } else if (params.channel_type == 'qqwap') {
                //     this.issuingBank = 'QQ钱包H5'
                // } else if (params.channel_type == 'wy') {
                //     this.issuingBank = '网银跳转'
                // } else if (params.channel_type == 'wykj') {
                //     this.issuingBank = '网银快捷'
                // }
                console.log(this.rechargeData)
                console.log(params)
                
                if (this.rechargeData.type_mode == 0) {
                    this.btnLoading = true;
                    this.loading = true;
                    this.$http.post(this.urlRequest + "?m=api&c=recharge&a=rechargeOnline", params).then(res => {
                        this.btnLoading = false;
                        this.loading = false;

                        if (res.data.status == 0) {
                            this.onlinePayInfo = false;
                            this.onlinePayTwo = true;
                            this.order_no = res.data.order_no;
                            this.collectBank = res.data.type;
                            if (res.data.code_img) {
                                this.codeImg = res.data.code_img;
                            } else {
                                this.$nextTick (function () {
                                    this.$refs.qrcode.innerHTML = '';
                                    this.qrcode(res.data.code_url);
                                })
                            }
                            // this.codeUrl = this.urlRequest
                            //             + "?m=api&c=recharge&a=payQrcode"
                            //             + "&qrcode_url=" + res.data.code_url
                            //             + "&token=" + localStorage.getItem("token");
                            // console.log(this.codeUrl)
                        } else {
                            this.onlinePayInfo = false;
                            this.errorFlag = true;
                            if (res.data.ret_msg !== '') {
                                this.$Message.warning(res.data.ret_msg);
                            }
                        }
                    }).catch(error => {
                        this.btnLoading = false;
                        this.loading = false;
                        this.$Message.warning('数据请求超时');
                    });
                } else if (this.rechargeData.type_mode == 1) {
                    this.paymentLink = this.urlRequest
                                + "?m=api&c=recharge&a=rechargeOnline"
                                + "&token=" + localStorage.getItem("token")
                                + "&channel_type=" + this.rechargeData.channel_type
                                + "&type=" + this.rechargeData.type
                                + "&pay_type=" + this.rechargeData.payment_name
                                + "&money=" + this.amountVal;
                    // window.open(this.paymentLink)
                    this.$Modal.confirm({
                        title: '温馨提示',
                        content: "正向你跳转第三方支付",
                        okText: '去支付',
                        cancelText: '取消',
                        onOk: () => {
                            this.ModalPayOk()
                        }
                    });
                } else if (this.rechargeData.type_mode == 2) {
                    this.paymentLink = this.urlRequest
                                + "?m=api&c=recharge&a=rechargeOnline"
                                + "&token=" + localStorage.getItem("token")
                                + "&channel_type=" + this.rechargeData.channel_type
                                + "&type=" + this.rechargeData.type
                                + "&pay_type=" + this.rechargeData.payment_name
                                + "&money=" + this.amountVal
                                + "&bank_code=" + this.selectedbankcode;
                    // window.open(this.paymentLink)
                    this.$Modal.confirm({
                        title: '温馨提示',
                        content: "正向你跳转第三方支付",
                        okText: '去支付',
                        cancelText: '取消',
                        onOk: () => {
                            this.ModalPayOk()
                        }
                    });
                }
                // console.log(this.paymentLink);
            } else { //线下
                var newMinRecharge = Number(this.rechargeData.min_recharge);
                var newMaxRecharge = Number(this.rechargeData.max_recharge);
                if (newAmountVal < newMinRecharge) {
                    this.$Message.warning('充值金额不能小于' + newMinRecharge + '元')
                    return
                }
                if (newAmountVal > newMaxRecharge) {
                    this.$Message.warning('充值金额不能大于' + newMaxRecharge + '元')
                    return
                }
                var params = {
                    token: localStorage.getItem("token"),
                    id: this.rechargeData.payment_id,
                    money : this.amountVal ? this.amountVal : ''
                };
                this.btnLoading = true;
                this.loading = true;
                this.$http.post(this.urlRequest + "?m=api&c=recharge&a=rechargeOffline", params).then(res => {
                    this.btnLoading = false;
                    this.loading = false;
                    if (res.data.status == 0) {
                        this.order = res.data.order_sn;
                        this.code = res.data.code;
                        this.offlinePayInfo = false;
                        this.offlinePayTwo = true;
                    } else {
                        this.$Message.warning(res.data.ret_msg);
                    }
                }).catch(error => {
                    this.btnLoading = false;
                    this.loading = false;
                    this.$Message.warning('数据请求超时');
                });
            }
        },
        qrcode(Url) {
            let qrcode = new QRCode('qrcode', {  
                width: 150,  // 设置宽度 
                height: 150, // 设置高度
                text: Url
            })  
        },
        ModalPayOk() {
            window.open(this.paymentLink)
            this.modalPayAfter = true;
        },
        ModalOk() {
            this.modalPayAfter = false;
            this.onlinePayInfo = false;
            this.successFlag = true;
        },
        ModalCancel() {
            this.modalPayAfter = false;
            this.onlinePayInfo = false;
            this.errorFlag = true;
        },
        copyText() {
            var clipboard = new Clipboard('.icoCopy')
            clipboard.on('success', e => {
                this.$Message.success("复制成功");
                clipboard.destroy() // 释放内存
            })  
            clipboard.on('error', e => {
                this.$Message.warning("该浏览器不支持自动复制");
                clipboard.destroy() // 释放内存
            })
        },
        submitOnLine() { //线上已完成支付
            var params = {
                token: localStorage.getItem("token"),
                order_no: this.order_no
            };
            this.btnLoading = true;
            // clearInterval(this.timer);
            this.$http.post(this.urlRequest + "?m=api&c=recharge&a=getRechargeInfo", params).then(res => {
                this.btnLoading = false;
                if (res.data.status == 0) {
                    setTimeout(()=> {
                        if (res.data.state == 0) {
                            // this.timer = setInterval(() => {
                            //     this.submitOnLine();
                            // }, 3000)
                            return
                        }
                        if (res.data.state == 1) {
                            this.onlinePayTwo = false;
                            this.successFlag = true;
                        }
                    }, 3000)
                }
            }).catch(error => {
                // this.timer = setInterval(() => {
                //     this.submitOnLine();
                // }, 3000)
                this.btnLoading = false;
                this.$Message.error("数据请求超时");
            });
        },
        submitOffLine() { //线下点击确认提交
            var params = {
                token: localStorage.getItem("token"),
                order_sn: this.order
            };
            this.btnLoading = true;
            this.$http.post(this.urlRequest + "?m=api&c=recharge&a=setRechargeMusic", params).then(res => {
                this.btnLoading = false;
                if (res.data.status == 0) {
                    this.offlinePayTwo = false;
                    this.successFlag = true;
                } else {
                    this.offlinePayTwo = false;
                    this.errorFlag = true;
                    this.$Message.error(res.data.ret_msg);
                }
            }).catch(error => {
                this.btnLoading = false;
                this.$Message.error("数据请求超时");
            });
        },
        successBtn() { //充值成功
            this.$Modal.success({
                content: "已完成支付，确认关闭？",
                onOk: () => {
                    this.onlinePay = true;
                    this.onlinePayInfo = true;
                    this.successFlag = false;
                }
            });
        },
        errorBtn() { //充值异常
            this.onlinePay = true;
            this.onlinePayInfo = true;
            this.errorFlag = false;
        },
    },
    watch: {
        amountNum:function(newVal, oldVal) {
            if (isNaN(newVal)) {
                this.amountNum = oldVal;
            } else {
                var re = /([0-9]+\.[0-9]{2})[0-9]*/;
                this.amountNum = newVal.replace(re, "$1");
            }            
        },
        onlinePay(bol) {
            if (this.onlineList.length || this.offlineList.length) {
                if (bol) {
                    this.rechargeData = this.onlineList[0];
                } else {
                    this.rechargeData = this.offlineList[0];
                }
            }
        },
    },
    destroyed() {
        // clearInterval(this.timer);
    }
}
</script>
<style scoped>
.recharge-wrapper {
    position: relative;
}
.pay-tab {
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee
}
.pay-tab a {
    float: left;
    margin-bottom: -1px;
    width: 120px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    color: #48484c;
    font-size: 15px;
    background-color: #fff;
    border: solid 1px #e6e6e6;
}
.pay-tab a.active {
    color: #fff;
    background-color: #f3596a;
    border: solid 1px #f3596a
}
.pay-tab a .icon {
    width: 20px;
    height: 18px;
    margin-right: 5px;
    background-repeat: no-repeat;
    /* background-image: url('../../../assets/images/spirt.png'); */
}
.pay-tab a .icon-xs {
    background-position: -226px -284px
}
.pay-tab a .icon-zx {
    background-position: -226px -302px
}
.pay-tab a.active .icon-xs {
    background-position: -250px -284px
}
.pay-tab a.active .icon-zx {
    background-position: -250px -302px
}



.item-list {
    padding: 15px 0;
}
.row-list {
    padding: 5px 0;
    font-size: 15px;
}
.item-list .col-l,
.row-list .col-l {
    text-align: right;
    padding-right: 5px;
}
.row-list .col-r {
    text-align: left;
    padding-left: 5px;
}
.recharge-list ul {
    margin-top: -15px;
}
.recharge-list ul li {
    position: relative;
    display: inline-block;
    margin-right: 20px;
    margin-top: 15px;
	padding: 10px;
	height: 40px;
	line-height: 20px;
    cursor: pointer;
    background: #fff;
	border: 1px solid #ccc;
}
.recharge-list ul li.checked,
.recharge-list ul li:hover {
	border-color: #F3596A;
}
.recharge-list ul li img {
	float: left;
	margin-right: 8px;
	width: 20px;
	height: 20px;
}
.quick-money {
    margin-top: -15px;
    width: 440px;
}
.quick-money .goods-items {
    position: relative;
    display: inline-block;
    margin-right: 20px;
    margin-top: 15px;
    text-align: center;
    width: 90px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ccc;
}
.quick-money .goods-items:hover,
.quick-money .goods-items.checked {
    border-color: #F3596A;
}
.recharge-list ul li.checked::after,
.quick-money .goods-items.checked::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    /* background: url('../../../assets/images/recharge/checked.png') no-repeat; */
}
.quick-money .other-amount {
    width: 200px;
}
.quick-money .other-amount input {
    float: left;
    margin: 4px 0 0 10px;
    width: 150px;
    padding: 0 4px;
    height: 30px;
    line-height: 28px;
    border: 1px solid #ccc;
}
.quick-money .other-amount input:focus {
    border-color: #57a3f3;
} 
.next-step,
.next-step:hover {
    display: inline-block;
    margin-top: 30px;
    padding: 0 20px;
    min-width: 90px;
    height:30px;
    line-height: 30px;
    color: #fff;
    background:rgba(243,89,106,1);
    border: 0;
    outline: none;
    border-radius:2px;
}
.next-step[disabled],
.next-step[disabled]:hover {
    color: #bbbec4;
    background-color: #f7f7f7;
}
.pay-info {
    position: relative;
}
.pay-info .public-title {
    height: 55px;
    line-height: 55px;
    font-size: 16px;
    border-bottom: 1px solid #e7e7e7;
}
.pay-info .row-wrap {
    margin: 50px 0;
}
.pay-info-online .col-r,
.pay-info-offline .col-r {
    text-align: center;
    border-left: 1px solid #eee;
}
.pay-info-online .col-r #qrcode,
.pay-info-offline .col-r img {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: solid 1px #979797;
}
.pay-info-offline .col-r .border-none {
    border: none;
}
.pay-info-oline .col-r p,
.pay-info-offline .col-r p {
    margin-top: 20px;
    font-size: 15px;
    color: #48484c;
}
.btn-wrap {
    text-align: center;
}
.btn-wrap .next-step {
    margin: 0 auto;
}

.pay-status .row-wrap {
    text-align: center;
}
.pay-status .row-wrap img {
    width: 110px;
}
.pay-status .row-wrap p {
    font-size: 18px;
    font-weight: 700;
}
.pay-status .next-step {
    min-width: 120px;
    background: #2d8cf0;
}

.mtb-min {
    margin: 20px 0;
}

.icoCopy {
    margin-left: 10px;
    cursor: pointer;
    vertical-align: top;
    line-height: 20px;
    font-size: 16px;
}
.recharge-tips {
    padding-top: 10px;
    text-align: left;
    color: #999;
    line-height: 1;
    font-size: 12px;
}
.tips {
    margin-top: 20px;
    width: 100%;
    min-height: 100px;
    padding: 15px 20px;
    border-radius: 4px;
    background-color: #fffcee;
    border: solid 1px #e6e6e6;
}
.tips h4 {
    font-size: 16px;
    font-weight: 600;
}
.tips p {
    font-size: 14px;
    color: #666666;
    line-height: 2;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999;
}
</style>



// WEBPACK FOOTER //
// src/components/topUpCenter/recharge/recharge.vue